<template>
  <div class="mt-1">
    <Spin :spinning="loading">
      <Row style="display: flex;margin-left: 3px;">
        <Col
          @click="handleStatusRefresh(item)"
          class="wapper"
          style="flex: 1; min-width: 0;margin-right: 3px;"
          v-for="(item, index) in items"
          :key="index"
        >
          <div class="home_card">
            <div class="card_left">
              <b class="text-neutral-500 text-[20px] font-semibold text">
                <span :class="textColor(item.id)">
                  {{ item.value }}
                </span>
              </b>
              <div class="text-neutral-500 text-[12px]" style="margin-top: 7px">
                <!-- <template > -->
                <div class="">
                  <!-- <AppstoreOutlined/> -->
                  <!-- {{ item.icon }} -->
                  <component :is="iconColor(item.id)" />
                  <!--<Badge-->
                  <!--status="processing"-->
                  <!--:color="BadgeColor(item.id)"-->
                  <!--/>-->
                  <statusIcon
                    style="float: left"
                    :flowStatus="item.id"
                  ></statusIcon>
                  <span
                    style="
                      line-height: 20px;
                      float: left;
                      margin-left: 7px;
                      font-size: 14px;
                    "
                    >{{ item.name }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </Spin>
  </div>
</template>

<script setup>
import * as http from '@/api/flow/index.js';
import { Alert, Card, Row, Col, Layout, Spin, Badge } from 'ant-design-vue';
import { Table, message } from 'ant-design-vue';
import { ref, reactive, onMounted, computed, watch } from 'vue';
import emiter from '@/plugins/bus.js';
import { useRowSelectStore } from "@/store/modules/rowSelectStore";

import {
  AppleOutlined,
  CodepenCircleOutlined,
  PauseCircleOutlined,
  InfoCircleOutlined,
  WarningOutlined,
  CheckCircleOutlined,
  SyncOutlined,
  AppstoreOutlined,
  PlayCircleOutlined,
  CloseCircleOutlined
} from '@ant-design/icons-vue';
defineOptions({
  name: 'Demo',
});
const rowSelectStore = useRowSelectStore();
watch(() => rowSelectStore.Gid, () => refresh());

//图片状态
import statusIcon from '@/components/statusIcon/index.vue';

const BadgeColor = (id) => {
  let colors = '';
  id == '' && (colors = 'blue');
  id == 'deploy' && (colors = '#ccc');
  id == 'stop' && (colors = 'orange');
  id == 'no_start' && (colors = 'yellow');
  id == 'error' && (colors = 'red');
  id == 'start' && (colors = 'lime');
  id == 'run' && (colors = 'green');
  id == 'checkError' && (colors = 'volcano');
  return colors
}
const textColor = (id) => {
  let colors = '';
  id == '' && (colors = 'text-[blue]');
  id == 'deploy' && (colors = 'text-[#ccc]');
  id == 'stop' && (colors = 'text-[orange]');
  id == 'no_start' && (colors = 'text-[#ccc]');
  id == 'error' && (colors = 'text-[red]');
  id == 'start' && (colors = 'text-[lime]');
  id == 'run' && (colors = 'text-[green]');
  id == 'checkError' && (colors = 'text-[#f50]');
  return colors
}
const items = ref([
  { name: $t('headerStatus.All1'), icon: 'AppstoreOutlined', value: '', id: '' },
  { name: $t('headerStatus.Nostart'), icon: 'PauseCircleOutlined', value: '', id: 'no_start' },
  { name: $t('headerStatus.Stop'), icon: 'PlayCircleOutlined', value: '', id: 'start' },
  { name: $t('headerStatus.Verifyexceptions'), icon: 'CloseCircleOutlined', value: '', id: 'run' },
  { name: $t('headerStatus.Synchronousexception'), icon: 'InfoCircleOutlined', value: '', id: 'stop' },
  { name: $t('headerStatus.Notstarted'), icon: 'PauseCircleOutlined', value: '', id: 'error' },
  { name: $t('headerStatus.Started'), icon: 'PauseCircleOutlined', value: '', id: 'checkError' },
  { name: $t('headerStatus.Inoperation'), icon: 'SyncOutlined', value: '', id: 'deploy' },
]);
// 状态映射表，全部中文和语义化icon
const statusMap = [
  { key: 'total', name: '全部', icon: 'AppstoreOutlined', id: 'total' },
  { key: 'wait', name: '待开始', icon: 'PlayCircleOutlined', id: 'wait' },
  { key: 'doing', name: '运行中', icon: 'SyncOutlined', id: 'doing' },
  { key: 'stop', name: '已停止', icon: 'PauseCircleOutlined', id: 'stop' },
  { key: 'gather_error', name: '采集异常', icon: 'InfoCircleOutlined', id: 'gather_error' },
  { key: 'assess_failed', name: '评估异常', icon: 'InfoCircleOutlined', id: 'gather_error' },
  { key: 'check_failed', name: '检查失败', icon: 'PauseCircleOutlined', id: 'check_failed' },
];
const iconColor = (id) => {
  let icon = '';
  id == '' && (icon = 'AppstoreOutlined');
  id == 'deploy' && (icon = 'PlayCircleOutlined');
  id == 'stop' && (icon = 'PauseCircleOutlined');
  id == 'no_start' && (icon = 'PauseCircleOutlined');
  id == 'error' && (icon = 'InfoCircleOutlined');
  id == 'start' && (icon = 'PlayCircleOutlined');
  id == 'run' && (icon = 'SyncOutlined');
  id == 'checkError' && (icon = 'CloseCircleOutlined');

  return icon

}
// TODO 加载状态
const loading = ref(false);
const refresh = () => {
  const userId = sessionStorage.getItem('userId');
  const userGroupId = rowSelectStore.Gid;
  loading.value = true;
  http.getObjectFlowStatus({ userId: userId, userGroupId: userGroupId }).then((res) => {
    loading.value = false;
    const { code, data, msg } = res;
    if (code === '000000') {
      console.log('items: ', items);
      items.value = statusMap.map(item => ({
        ...item,
        value: data[item.key] ?? 0
      }));
    } else {
      message.error('获取状态失败');
    }
  });
};
onMounted(refresh);
const searchData = reactive({
  flowStatus: '',
});
const handleStatusRefresh = (item) => {
  console.log('item: ', item);
  searchData.flowStatus = item.id;
  emiter.emit('refreshFunStatus', searchData);
};

emiter.on('refreshTopModuleSt', () => {
  refresh()
});
//解绑emit
import { onUnmounted } from 'vue';
onUnmounted(() => {
  emiter.off('refreshTopModuleSt');
});
</script>

<style lang="scss" scoped>
.wapper {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  &:hover {
    transform: translateY(-5px);
    transition: transform 1s linear, -webkit-transform 1s linear;
  }
}
.home_card {
  display: flex;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  padding: 0.6rem 0;
  border-radius: 5px;

  .card_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 100%;
  }
}
</style>
